<!-- <nz-spin *ngIf="isLoading" [nzTip]="'页面加载中...,请稍后'" [nzSpinning]="true" style="width: 100%;height: 100%;"></nz-spin> -->


<nz-layout>
	<nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
		<div [ngClass]="{'logo': !isCollapsed, 'logo-sml': isCollapsed }">
			<span *ngIf="!isCollapsed">网格走访平台</span>
			<span class="logo-text" *ngIf="isCollapsed">网</span>
		</div>
		<ul nz-menu nzTheme="dark" nzMode="inline" nzInlineCollapsed>
			<li nz-menu-item routerLink="/page/home" [nzMatchRouter]="true">
				<i nz-icon nzType="home"></i>
				<span>首页</span>
			</li>
			<ng-container *ngIf="tree?.length">
				<ng-container *ngFor="let item of tree;">
					<ng-container *ngIf="item.nodes?.length">
						<li nz-submenu [nzTitle]="item.resName" [nzIcon]="getIcon(item.nodes)">
							<ul>
								<ng-container *ngFor="let subItem of item.nodes">
									<li *ngIf="subItem.resUrl" nz-menu-item [routerLink]="subItem?.resUrl"
										[nzMatchRouter]="true">{{subItem.resName}}</li>
								</ng-container>
							</ul>
						</li>
					</ng-container>
					<ng-container *ngIf="!item.nodes?.length && item.resUrl">
						<li nz-menu-item [routerLink]="item?.resUrl" [nzMatchRouter]="true">
							<ng-container *ngIf="item?.resUrl?.includes('/home')">
								<i nz-icon nzType="home"></i>
							</ng-container>
							<span>{{item.resName}}</span>
						</li>
					</ng-container>
				</ng-container>
			</ng-container>


			<!-- <li nz-menu-item routerLink="/page/home" [nzMatchRouter]="true">
				<i nz-icon nzType="home"></i>
				<span>首页</span>
			</li>
			<li nz-submenu nzTitle="系统管理" nzIcon="appstore">
				<ul>
					<li nz-menu-item routerLink="/page/system/system-organize" [nzMatchRouter]="true">组织机构</li>
					<li nz-menu-item routerLink="/page/system/system-user" [nzMatchRouter]="true">用户管理</li>
					<li nz-menu-item routerLink="/page/system/system-role" [nzMatchRouter]="true">角色权限管理</li>
					<li nz-menu-item routerLink="/page/system/system-menu" [nzMatchRouter]="true">菜单管理</li>
				</ul>
			</li>
			<li nz-submenu nzTitle="网格员管理" nzIcon="group">
				<ul>
					<li nz-menu-item routerLink="/page/grid/grid-list/1" [nzMatchRouter]="true">专职网格长</li>
					<li nz-menu-item routerLink="/page/grid/grid-list/2" [nzMatchRouter]="true">网格员</li>
					<li nz-menu-item routerLink="/page/grid/grid-list/3" [nzMatchRouter]="true">微网格长</li>
					<li nz-menu-item routerLink="/page/grid/grid-household" [nzMatchRouter]="true">村户管理</li>
				</ul>
			</li>
			<li nz-submenu nzTitle="基础配置" nzIcon="setting">
				<ul>
					<li nz-menu-item routerLink="/page/base/base-addr" [nzMatchRouter]="true">社区管理</li>
					<li nz-menu-item routerLink="/page/base/base-area" [nzMatchRouter]="true">网格管理</li>
					<li nz-menu-item routerLink="/page/base/base-schedule" [nzMatchRouter]="true">定时任务管理</li>
					<li nz-menu-item routerLink="/page/base/base-tag" [nzMatchRouter]="true">村户标签</li>
				</ul>
			</li>
			<li nz-submenu nzTitle="爆料管理" nzIcon="bell">
				<ul>
					<li nz-menu-item routerLink="/page/disclose/disclose-list" [nzMatchRouter]="true">爆料记录</li>
					<li nz-menu-item routerLink="/page/disclose/disclose-title" [nzMatchRouter]="true">爆料主题</li>
				</ul>
			</li>
			<li nz-submenu nzTitle="走访管理" nzIcon="team">
				<ul>
					<li nz-menu-item routerLink="/page/visit/visit-theme" [nzMatchRouter]="true">走访主题管理</li>
					<li nz-menu-item routerLink="/page/visit/visit-task" [nzMatchRouter]="true">走访任务查询</li>
					<li nz-menu-item routerLink="/page/visit/visit-record" [nzMatchRouter]="true">走访记录查看</li>
				</ul>
			</li> -->
		</ul>
	</nz-sider>
	<nz-layout>
		<nz-header>
			<div style="display: flex;">
				<i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
				(click)="isCollapsed = !isCollapsed"></i>
				<nz-breadcrumb>
					<nz-breadcrumb-item>
						<a [routerLink]="'/page/home'">
							<i nz-icon nzType="home"></i>首页
						</a>
					</nz-breadcrumb-item>
					<nz-breadcrumb-item *ngFor="let item of breadcrumbList">
						<ng-container *ngIf="item?.icon">
							<i nz-icon [nzType]="item?.icon"></i>
						</ng-container>
						{{item.resName}}
					</nz-breadcrumb-item>
				</nz-breadcrumb>
			</div>

			<div style="margin-right: 25px;">
				<nz-badge nz-dropdown *ngIf="authList.includes(authEnum.NOTICE_VIEW)" nzTrigger="click"
					(nzVisibleChange)="getNoticeList($event)" [nzPlacement]="'bottomRight'"
					[nzDropdownMenu]="nzNoticeMenu" [nzCount]="noticeNum" nzShowZero style="margin-right: 25px;">
					<i nz-icon [ngClass]="{'bell-shake': isMsg}" style="font-size: 18px;color: #1890ff;" nzType="bell"
						nzTheme="outline"></i>
				</nz-badge>
				<nz-dropdown-menu #nzNoticeMenu="nzDropdownMenu">
					<nz-spin style="width: 100px;height: 100px;background: #fff;" *ngIf="isLoading"
						[nzTip]="'Loading...'" [nzSpinning]="true"></nz-spin>

					<!-- <ul nz-menu nzSelectable *ngIf="!isLoading">
							<ng-container *ngFor="let item of noticeList.slice(0, 5);">
								<li nz-menu-item>
									<nz-badge nzStatus="default" [nzText]="item?.title"></nz-badge>
								</li>
							</ng-container>
							<li nz-menu-item *ngIf="noticeList?.length > 5" style="text-align: center;">
								<a routerLink="/page/base/base-notice" style="color:#1890ff">查看更多</a>
							</li>
						</ul> -->
					<div *ngIf="!isLoading"
						style="padding: 20px 20px 10px 20px;background: #fff;box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);">
						<nz-table #basicTable [nzData]="noticeList.slice(0, 5)" [nzBordered]="true"
							[nzShowPagination]="false" [nzPageSize]="10" nzSize="small">
							<thead>
								<tr>
									<th nzAlign="center" nzWidth="auto">消息标题</th>
									<th nzAlign="center" nzWidth="auto">发送时间</th>
									<th nzAlign="center">消息类型</th>
									<th nzAlign="center">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr *ngFor="let item of basicTable.data; let i = index;">
									<td nzAlign="center">
										{{item.title}}
									</td>
									<td nzAlign="center">
										{{item.createTime}}
									</td>
									<td nzAlign="center">
										<ng-container *ngIf="item.type * 1 === 1">
											<nz-tag [nzColor]="'#2db7f5'">爆料</nz-tag>
										</ng-container>
										<ng-container *ngIf="item.type * 1 === 2">
											<nz-tag [nzColor]="'#87d068'">走访</nz-tag>
										</ng-container>
									</td>
									<td nzAlign="center">
										<ng-container *ngIf="item.type * 1 === 1">
											<a [routerLink]="'/page/disclose/disclose-list'">处理</a>
										</ng-container>
										<ng-container *ngIf="item.type * 1 === 2">
											<a [routerLink]="'/page/visit/visit-record/1'">处理</a>
										</ng-container>
									</td>
								</tr>
							</tbody>
						</nz-table>
						<div style="line-height: 30px;width: 100%; text-align: center;">
							<a routerLink="/page/base/base-notice" style="color:#1890ff">查看更多</a>
						</div>
					</div>

				</nz-dropdown-menu>
				<!-- <a (click)="logout()"> {{userInfo?.userName || '暂无'}},注销 </a>
				<a style="margin: 0 20px;" (click)="resetPassword()"> 更改密码 </a> -->
				<a nz-dropdown [nzDropdownMenu]="menu">
					{{userInfo?.userName}}
					<i nz-icon nzType="down"></i>
				</a>
				<nz-dropdown-menu #menu="nzDropdownMenu">
					<ul nz-menu nzSelectable>
						<li nz-menu-item (click)="logout()">注销</li>
						<li nz-menu-item (click)="resetPassword()">更改密码</li>
					</ul>
				</nz-dropdown-menu>
			</div>
		</nz-header>
		<nz-content [ngStyle]="{margin: isHome ? 0 : '10px 16px'}">
			<router-outlet></router-outlet>
		</nz-content>
		<!-- <nz-footer>Ant Design ©2020 Implement By Angular</nz-footer> -->
	</nz-layout>
</nz-layout>






<!-- <app-exception type='403' text='抱歉，你无权限访问该系统,请联系管理员' [isBtn]="false" *ngIf="!isLoading && !tree?.length" ></app-exception> -->